<div class="widgets">
  <div class="row">
    <div class="col-md-12">
      <sa-card title="Ionicons-Logo" baCardClass="with-scroll">
        <div class="row icon-list">
          <div class="col-sm-1 icon" *ngFor="let logo of logos">
            <ion-icon [name]="logo" [title]="logo" class="icon-ionic"></ion-icon>
          </div>
        </div>
        <a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
      </sa-card>
    </div>
    <div class="col-md-4">
      <sa-card title="Ionicons-Filled" baCardClass="with-scroll">
        <div class="row icon-list">
          <div class="col-sm-2 icon" *ngFor="let icon of icons">
            <ion-icon [name]="icon" [title]="icon" class="icon-ionic"></ion-icon>
          </div>
        </div>
      </sa-card>
    </div>
    <div class="col-md-4">
      <sa-card title="Ionicons-Outline" baCardClass="with-scroll">
        <div class="row icon-list">
          <div class="col-sm-2 icon" *ngFor="let icon of icons">
            <ion-icon [name]="icon + '-outline'" [title]="icon" class="icon-ionic"></ion-icon>
          </div>
        </div>
      </sa-card>
    </div>
    <div class="col-md-4">
      <sa-card title="Ionicons-Sharp" baCardClass="with-scroll">
        <div class="row icon-list">
          <div class="col-sm-2 icon" *ngFor="let icon of icons">
            <ion-icon [name]="icon + '-sharp'" [title]="icon" class="icon-ionic"></ion-icon>
          </div>
        </div>
      </sa-card>
    </div>
  </div>
</div>
